<template>
    <div>
        <main>
            <h2>面向中国人的糖尿病风险评估模型,用于20-74岁人群</h2>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="您的年龄(岁)" prop="age">
                    <el-select v-model.number="ruleForm.age" placeholder="请选择您的年龄">
                        <el-option label="20-24" value="20"></el-option>
                        <el-option label="25-34" value="25"></el-option>
                        <el-option label="35-39" value="35"></el-option>
                        <el-option label="40-44" value="40"></el-option>
                        <el-option label="45-49" value="45"></el-option>
                        <el-option label="50-54" value="50"></el-option>
                        <el-option label="55-59" value="55"></el-option>
                        <el-option label="60-64" value="60"></el-option>
                        <el-option label="65-74" value="65"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="您的性别" prop="sex">
                    <el-radio-group v-model.number="ruleForm.sex" @change="change">
                        <el-radio label="男" ></el-radio>
                        <el-radio label="女" ></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="您的身高（cm）" prop="height">
                    <el-input v-model.number="ruleForm.height" size="small"></el-input>
                </el-form-item>
                <el-form-item label="您的体重（kg）" prop="weight">
                    <el-input v-model.number="ruleForm.weight" size="small"></el-input>
                </el-form-item>
                <el-form-item label="您的腰围？（cm）" required>
                    男：
                    <el-select v-model.number="ruleForm.waistline" placeholder="请选择腰围" :disabled="boy">
                        <el-option label="<75cm" value="75"></el-option>
                        <el-option label="75-79.9cm" value="79"></el-option>
                        <el-option label="80-84.9cm" value="80"></el-option>
                        <el-option label="85-89.9cm" value="85"></el-option>
                        <el-option label="90-94.9cm" value="90"></el-option>
                        <el-option label="<95cm" value="95"></el-option>
                    </el-select>
                    女：
                    <el-select v-model.number="ruleForm.waistline" placeholder="请选择腰围" :disabled="girl">
                        <el-option label="<70cm" value="70"></el-option>
                        <el-option label="70-74.9cm" value="74"></el-option>
                        <el-option label="75-79.9cm" value="79"></el-option>
                        <el-option label="80-84.9cm" value="84"></el-option>
                        <el-option label="85-89.9cm" value="89"></el-option>
                        <el-option label=">=90cm" value="90"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收缩压（mmHg)" prop="sbp">
                    <el-select v-model="ruleForm.sbp" placeholder="请选择您的收缩压">
                        <el-option label="<110" value="110"></el-option>
                        <el-option label="110-119" value="119"></el-option>
                        <el-option label="120-129" value="129"></el-option>
                        <el-option label="130-139" value="139"></el-option>
                        <el-option label="140-149" value="149"></el-option>
                        <el-option label="150-159" value="159"></el-option>
                        <el-option label=">=160" value="160"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否有糖尿病家族史（父母、同胞、子女）" prop="relatives">
                    <el-radio-group v-model.number="ruleForm.relatives">
                        <el-radio :label="1" >是</el-radio>
                        <el-radio :label="0" >否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交查看分数</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>



        </main>

        <div class="box animate__animated animate__flipInX">
                <h3>您的得分：</h3>
            <div class="score">
                {{score}}
            </div>
            <h4>建议</h4>
            <div class="suggest">
                {{suggestion}}
            </div>
        </div>
    </div>

    
</template>

<script>
    export default {
        name: "forecast",
        data() {
            var checkWeight = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('体重不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 35||value>150) {
                            callback(new Error('体重范围必须正常！'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            var checkHeight = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('身高不能为空'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (value < 120||value>230) {
                            callback(new Error('身高范围必须正常！'));
                        } else {
                            callback();
                        }
                    }
                }, 1000);
            };
            return {
                boy:true,
                girl:true,
                ruleForm: {
                    sbp: '',
                    waistline: '',

                    weight: '',
                    height:'',
                    age:'',
                    relatives: '',
                    sex:''
                },
                score:'',
                suggestion:'',

                rules: {
                    weight: [
                        { validator: checkWeight, trigger: 'blur' },
                    ],
                    height: [
                        { validator:checkHeight, trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '请选择年龄', trigger: 'change' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    sbp: [
                        { required: true, message: '请选择收缩压', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    relatives: [
                        { required: true, message: '请选择亲戚是否患病', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                console.log(this.ruleForm)
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post("http://localhost:8181/forecast/test",this.ruleForm).then(function (resp) {
                            if (resp.data.msg == 'success'){
                                console.log(resp.data.data)
                                _this.score = resp.data.data.score;
                                _this.suggestion = resp.data.data.suggest
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            change(val){
                let that = this
                that.boy =(val==="男")?false:true;
                that.girl =(val==="女")?false:true;
            }
        }

    }
</script>

<style scoped>
    main{
        position: absolute;
        width: 700px;
        height: 800px;
        /*background-color: #12d170;*/
        margin-left: 100px;
        margin-top: 20px;
        padding: 20px;
    }
    el-input {
        width: 50% !important;
    }
    .box{
        position: absolute;
        width: 200px;
        height: 300px;
        background: #c1eddc;
        right: 100px;
        top: 200px;
        box-shadow: 0px 15px 10px -15px rgb(74, 131, 131);
        border-radius: 10px;
    }
    .score{
        height: 50px;
        /*background-color: #12d170;*/
        text-align: center;
        font-size: 2em;
        font-weight: 700;
        line-height: 50px;
    }
    .suggest{
        height: 100px;
        /*background-color: beige;*/
        padding: 10px;
    }

</style>